iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 9
1
自我挑戰組

30天資料整理系列 第 9

DAY09,從青蛙學習flex之14-17

  • 分享至 

  • xImage
  •  

今天就練習order及align-self這些屬性
https://ithelp.ithome.com.tw/upload/images/20200919/20129570FcE2snzxNc.png
紅的要在黃的前面在黃的CSS裡
輸入:

order:1;

這樣就過第十四關了

https://ithelp.ithome.com.tw/upload/images/20200919/201295701nzcEUSJEh.png
這裡要將紅的放到最前面,這邊要記住order預設都是0所以
輸入:

order:-1;

這樣就過第十五關了

https://ithelp.ithome.com.tw/upload/images/20200919/20129570TvlADxEpZs.png
這裡單獨要將黃的放到最下面所以
輸入:

align-self: flex-end;

這樣就過第十六關了

https://ithelp.ithome.com.tw/upload/images/20200919/201295709m7Botjp7F.png
這裡將所有黃的放到最下面所以要將黃色的放在一起所以就要使用order
輸入:

order:1;
align-self:flex-end;

這樣就過第十七關了


上一篇
DAY08,從青蛙學習flex之8-13
下一篇
DAY10,從青蛙學習flex之18-23
系列文
30天資料整理30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言